<template>
  <div class="lvchen_qinghua">
    <template v-if="!inline">
      <div class="lvchen">
        <div class="content_title">
          <span class="content_text">滤尘</span>
        </div>

        <div class="qinghua_body">
          <div class="qinghuaCol1">
            <div v-for="(item, index) in qinghuaData.qinghuaCol1Data" :key="index + '3'" class="lvchen_item">
              <qinghua :data="item"></qinghua>
            </div>
          </div>
        </div>
      </div>
      <i class="wall"></i>
    </template>
    <div class="qinghua">
      <div class="content_title" v-if="!inline">
        <span @click="showDialogTech" style="cursor: pointer">
          <span class="content_text">清花</span>
          <img class="content_img" src="../assets/img/resource/icon/qinghua.png" alt="" srcset="" />
        </span>
      </div>

      <div class="qinghua_body">
        <div class="qinghuaCol2">
          <div class="qinghuaCol2_item1">
            <div>
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_1')">
                <img src="../assets/img/donglis.svg" alt="" srcset="" />
              </div>
              <div @click="clickHandle('zhuamian', zhuamianData[0])">
                <zhuamian :data="zhuamianData[0]" :inline="inline"></zhuamian>
              </div>
            </div>
            <div v-for="(item, index) in [0, 1]" :key="index + '3'">
              <div class="item">
                <div class="item1" @click="clickHandle('kaimian', jinkaimainData1[item])">
                  <kaimian :data="jinkaimainData1[item]" :inline="inline"></kaimian>
                </div>
                <div class="item2" @click="clickHandle('duocang', duocangData1[item])">
                  <duocang :data="duocangData1[item]" :inline="inline"></duocang>
                </div>
              </div>
            </div>
          </div>
          <div class="qinghuaCol2_item2">
            <div>
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_2')">
                <img src="../assets/img/donglis.svg" alt="" srcset="" />
              </div>
              <div @click="clickHandle('zhuamian', zhuamianData[1])">
                <zhuamian :data="zhuamianData[1]" :inline="inline"></zhuamian>
              </div>
            </div>
            <div v-for="(item, index) in [0, 1]" :key="index + '4'">
              <div class="item">
                <div class="item1" @click="clickHandle('kaimian', jinkaimainData2[index])">
                  <kaimian :data="jinkaimainData2[index]" :inline="inline"></kaimian>
                </div>
                <div class="item2" @click="clickHandle('duocang', duocangData2[index])">
                  <duocang :data="duocangData2[index]" :inline="inline"></duocang>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 抓棉弹窗控件 -->
      <zhuamianDialog ref="zhuamianDialog"></zhuamianDialog>
      <!-- 多仓弹窗控件 -->
      <duocangDialog ref="duocangDialog"></duocangDialog>
      <!-- 多仓弹窗控件 -->
      <kaimianDialog ref="kaimianDialog"></kaimianDialog>
      <!-- 动力柜弹窗控件 -->
      <dongliDialog ref="dongliDialog"></dongliDialog>
      <!-- 清花工艺详情 -->
      <qinghua-dialog-tech v-if="techShow" ref="qinghuaDialogTech"></qinghua-dialog-tech>
    </div>
  </div>
</template>

<script>
import dongliDialog from "../views/qcs/components/dialog/dialog_dongli/index";
import zhuamianDialog from "../views/qcs/components/dialog/dialog_zhuamian/index";
import duocangDialog from "../views/qcs/components/dialog/dialog_duocang/index";
import kaimianDialog from "../views/qcs/components/dialog/dialog_kaimian/index";
import qinghua from "../views/qcs/components/qinghua";
import zhuamian from "../views/qcs/components/zhuamian";
import duocang from "../views/qcs/components/duocang";
import kaimian from "../views/qcs/components/kaimian";
import COMMON from "../utils/common";
import dongLiMenu from "@/assets/data/dongli.json";
import dongliItem from "@/assets/data/dongliItem.json";
export default {
  name: "QingHua",
  props: {
    msg: String,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  components: {
    dongliDialog,
    zhuamianDialog,
    duocangDialog,
    kaimianDialog,
    qinghua,
    kaimian,
    duocang,
    zhuamian
  },
  // 组件相互调用 需在beforeCreate注册
  beforeCreate: function () {
    this.$options.components.qinghuaDialogTech =
      require("../views/qcs/components/dialogBig/dialog_qinghua_tech/index").default;
  },
  created() {
    this.dongLiMenu = dongLiMenu;
    this.dongLiItem = dongliItem;
  },
  data() {
    return {
      techShow: false,
      zhumianShow: false,
      zhuamianData: [],
      jinkaimainData1: [],
      jinkaimainData2: [],
      duocangData1: [],
      duocangData2: [],
      qinghuaData: {
        qinghuaCol1Data: []
      }
    };
  },
  methods: {
    closeHandle(type) {
      // 若清花组件在1.5级弹窗内，当关闭二级弹窗时，需要打开1.5级的轮询
      if (this.inline) {
        // 关闭二级轮询
        this.$EventBus.$emit("clearTypeInterval", type);
        this.$parent.$parent.getTableData();
      } else {
        this.$parent.closeParentHandle();
      }
    },
    clickHandle(flag, item) {
      switch (flag) {
        case "duocang":
          if (this.inline) {
            this.$EventBus.$emit("getInfoByDevSn", "DUOCANG", item.devSn);
            this.$EventBus.$emit("inlineDialog", "close");
          } else {
            this.$parent.getInfoByDevSn("DUOCANG", item.devSn);
          }
          this.$refs.duocangDialog.showDialog(item);
          break;
        case "kaimian":
          if (this.inline) {
            this.$EventBus.$emit("getInfoByDevSn", "KAIMIAN", item.devSn);
            this.$EventBus.$emit("inlineDialog", "close");
          } else {
            this.$parent.getInfoByDevSn("KAIMIAN", item.devSn);
          }
          this.$refs.kaimianDialog.showDialog(item);
          break;
        case "zhuamian":
          if (this.inline) {
            this.$EventBus.$emit("getInfoByDevSn", "ZHUAMIAN", item.devSn);
            this.$EventBus.$emit("inlineDialog", "close");
          } else {
            this.$parent.getInfoByDevSn("ZHUAMIAN", item.devSn);
          }
          this.$refs.zhuamianDialog.showDialog(item);
          break;
      }
    },
    clickHandleDl(item) {
      var getInfoQuary = this.dongLiMenu[item];
      var dialogData = this.dongLiItem[item];
      // 若组件在1.5级弹窗内，当打开二级弹窗时，需要关闭1.5级的轮询
      if (this.inline) {
        this.$EventBus.$emit("getInfoByDevSn", "DONGLI", getInfoQuary);
        this.$EventBus.$emit("inlineDialog", "close");
      } else {
        this.$parent.getInfoByDevSn("DONGLI", getInfoQuary);
      }
      this.$refs.dongliDialog.showDialog(dialogData);
    },
    showDialogTech() {
      this.techShow = true;
      this.$nextTick(() => {
        setTimeout(() => {
          // 初始化请求
          // 1.5级轮询
          this.$parent.openInlineDialog("QINGHUA", {}, true);
          this.$refs.qinghuaDialogTech.showDialog();
        });
      });
    },
    closeDialogTech() {
      this.techShow = false;
      this.$parent.closeParentHandle();
    }
  },
  computed: {
    zhuaMianGroupState() {
      return this.$store.state.zhuaMianGroupState;
    },
    kaiMianGroupState() {
      return this.$store.state.kaiMianGroupState;
    },
    duoCangGroupState() {
      return this.$store.state.duoCangGroupState;
    },
    qingHuaGroupState() {
      return this.$store.state.qingHuaGroupState;
    }
  },
  watch: {
    zhuaMianGroupState: {
      immediate: true,
      handler(val) {
        this.zhuamianData = COMMON.devSnFilter(val.data, 1, val.data.length);
      }
    },
    kaiMianGroupState: {
      immediate: true,
      handler(val) {
        this.jinkaimainData1 = COMMON.devSnFilter(val.data, 1, 2);
        this.jinkaimainData2 = COMMON.devSnFilter(val.data, 3, val.data.length);
      }
    },
    duoCangGroupState: {
      immediate: true,
      handler(val) {
        this.duocangData1 = COMMON.devSnFilter(val.data, 1, 2);
        this.duocangData2 = COMMON.devSnFilter(val.data, 3, val.data.length);
      }
    },
    qingHuaGroupState: {
      immediate: true,
      deep: true,
      handler(val) {
        this.qinghuaData.qinghuaCol1Data = val.data;
      }
    }
  }
};
</script>

<style scoped></style>
